// 使用 postcss-px-to-viewport 后，你可以直接写 px，它会自动转换为 vw

// 示例1：基础使用
.container {
  width: 1920px;      // 会被转换为 100vw
  height: 1080px;     // 会被转换为 100vh (如果配置了 viewportUnit: 'vw,vh')
  padding: 20px;      // 会被转换为 1.042vw (20 * 100 / 1920)
  font-size: 16px;    // 会被转换为 0.833vw
}

// 示例2：不想被转换的情况
.ignore-px {
  border: 1px solid #ccc;     // 使用大写 PX 避免转换
  border: 1PX solid #ccc;     // 不会被转换
}

// 示例3：使用注释控制
.special {
  /* px-to-viewport-ignore-next */
  width: 100px;              // 这行不会被转换
  height: 100px;             // 这行会被转换
}

// 示例4：在类名黑名单中
.ignore {
  width: 100px;              // 不会被转换（因为在 selectorBlackList 中）
}

// 对比原来的方式（需要手动调用函数）
// 之前：width: $pxtovw.pxVw(100)
// 现在：width: 100px; （自动转换）

// 高级用法：CSS 变量结合
:root {
  --header-height: 60px;     // 会被转换为 3.125vw
  --sidebar-width: 240px;    // 会被转换为 12.5vw
}

.header {
  height: var(--header-height);
}

// 媒体查询示例（如果开启了 mediaQuery: true）
@media (min-width: 768px) {
  .responsive {
    width: 500px;            // 也会被转换
  }
}